<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>悬浮代码提示SQL编辑器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/dracula.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
    <header>
        <h1><i class="fas fa-database"></i> 悬浮代码提示SQL编辑器</h1>
        <p class="subtitle">带有悬浮代码提示功能的SQL编辑器实现</p>
    </header>

    <main class="editor-container">
        <div class="panel-title">
            <span><i class="fas fa-code"></i> SQL编辑器</span>
        </div>
        <div class="code-editor" id="editor"></div>

        <div class="controls">
            <button class="btn run" id="runBtn">
                <i class="fas fa-play"></i> 执行SQL
            </button>
            <button class="btn" id="formatBtn">
                <i class="fas fa-magic"></i> 格式化SQL
            </button>
            <button class="btn clear" id="clearBtn">
                <i class="fas fa-trash"></i> 清空编辑器
            </button>
            <button class="btn theme" id="themeBtn">
                <i class="fas fa-palette"></i> 切换主题
            </button>
        </div>
    </main>

    <section class="output-container">
        <div class="panel-title">
            <span><i class="fas fa-table"></i> 查询结果</span>
        </div>
        <div class="output" id="output">
            <div class="info">执行SQL语句后，结果将显示在此区域</div>
        </div>
        <div class="status-bar">
            <div id="status">就绪</div>
            <div id="execution-time">执行时间: 0ms</div>
        </div>
    </section>

    <section class="examples">
        <h2><i class="fas fa-lightbulb"></i> SQL示例</h2>
        <div class="examples-grid">
            <div class="example-card" data-example="select">
                <h3><i class="fas fa-search"></i> SELECT查询</h3>
                <pre>-- 查询所有员工信息
SELECT * FROM employees;</pre>
            </div>
            <div class="example-card" data-example="join">
                <h3><i class="fas fa-link"></i> JOIN连接</h3>
                <pre>-- 连接员工和部门表
SELECT e.name, e.salary, d.department_name
FROM employees e
JOIN departments d ON e.department_id = d.id;</pre>
            </div>
            <div class="example-card" data-example="aggregate">
                <h3><i class="fas fa-calculator"></i> 聚合函数</h3>
                <pre>-- 计算每个部门的平均薪资
SELECT d.department_name, AVG(e.salary) AS avg_salary
FROM employees e
JOIN departments d ON e.department_id = d.id
GROUP BY d.department_name;</pre>
            </div>
        </div>
    </section>

    <section class="database-info">
        <h3><i class="fas fa-sitemap"></i> 示例数据库结构</h3>
        <div class="tables">
            <div class="table-card">
                <h4>employees 表</h4>
                <ul>
                    <li><span>id</span> INTEGER (PK)</li>
                    <li><span>name</span> TEXT</li>
                    <li><span>email</span> TEXT</li>
                    <li><span>salary</span> REAL</li>
                    <li><span>hire_date</span> DATE</li>
                    <li><span>department_id</span> INTEGER</li>
                </ul>
            </div>
            <div class="table-card">
                <h4>departments 表</h4>
                <ul>
                    <li><span>id</span> INTEGER (PK)</li>
                    <li><span>department_name</span> TEXT</li>
                    <li><span>location</span> TEXT</li>
                    <li><span>budget</span> REAL</li>
                </ul>
            </div>
            <div class="table-card">
                <h4>projects 表</h4>
                <ul>
                    <li><span>id</span> INTEGER (PK)</li>
                    <li><span>project_name</span> TEXT</li>
                    <li><span>start_date</span> DATE</li>
                    <li><span>end_date</span> DATE</li>
                    <li><span>manager_id</span> INTEGER</li>
                </ul>
            </div>
        </div>
    </section>
</div>

<footer>
    <p>© 2023 悬浮代码提示SQL编辑器 | 基于CodeMirror实现</p>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/sql/sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/matchbrackets.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/hint/show-hint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/hint/sql-hint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.8.0/sql-wasm.js"></script>
<script src="script.js"></script>
</body>
</html>